<!DOCTYPE html>
<html lang="en" >
<head>
</head>
<!-- 前端 -->
<body>
    <div id="app">
       <itkaige>
            <itkaige-title slot="itkaige-title" :title="title"></itkaige-title>
            <itkaige-item slot="itkaige-item" v-for="(item,id) in items" :item="item" :id="id" 
            @remove="dataremove(id)"></itkaige-item>
        </itkaige>
    </div>    

<!-- 导入vue.js -->
    <script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>

        // 定义vue组件
        Vue.component("itkaige",{
            template:'<div>\
                        <slot name="itkaige-title"></slot>\
                        <ul>\
                            <slot name="itkaige-item"></slot>\
                        </ul>\
                    </div>'
        })
        Vue.component("itkaige-title",{
            props:['title'],
            template:'<div>{{title}}</div>'
        })
        Vue.component("itkaige-item",{
            props:['item','id'],
            template:'<li>{{id}}--{{item}} <button @click="remove">删除</button></li> ',
            methods:{
                remove(id){
                    // this.$emit自定义事件分发
                    this.$emit('remove',id);//remove由方法变成了一个事件
                }
            }
        })
        

        // vue实例
        var vm=new Vue({
            el:"#app",
            data:{
                title:"itkaige说Java",
                items:["java","linux","前端"]
            },
            methods:{ 
                dataremove(id){
                    console.log("删除了"+this.items[id]);
                    this.items.splice(id,1);    //一次删除一个元素
                }
            }
            
        })

    </script>
</body>
</html>